import { ToolBar, UdpIcon, udp } from '@cscec/udp-ui';
import { getSchemaTpl } from 'amis-editor';
import { useMemo } from 'react';
import { wrapperRender } from '../wrapperRender';
import { arrayToOptions } from '../../util';
import React from 'react';

const iconOptions = Object.keys(UdpIcon).filter((key) => key.endsWith('Outlined'));

export default wrapperRender(({
  outRef, buttons, render, buttonSize = 'middle', buttonType = 'text', ...payload
}) => {
  const items = useMemo(() => buttons.map((item: any) => {
    if (udp.isObject(item)) {
      const {
        itemType, itemId, size, icon, ...btn
      } = item as any;
      return {
        type: itemType || buttonType,
        size: size || buttonSize,
        id: itemId,
        icon: icon || null,
        ...btn,
      };
    }
    return item;
  }), [buttons]);

  return <ToolBar id="toolbar" size={buttonSize} type={buttonType} {...payload} buttons={items} ref={outRef} />;
}, {
  type: 'tool-bar',
  name: '工具条组件',
  icon: 'ToolOutlined',
  order: -7999,
  description: '按钮集合',
  events: [
    {
      eventName: 'click',
      eventLabel: '点击工具条按钮',
      description: '点击工具条按钮',
      dataSchema: [
        {
          type: 'object',
          properties: {
            nativeEvent: {
              type: 'object',
              title: '点击事件对象',
            },
          },
        },
      ],
    },
  ],
  scaffold: {
    buttonSize: 'middle',
    buttonType: 'primary',
    buttons: [{ itemId: 'save', size: 'middle', text: '保存' }],
  },
  panelBodyCreator(context: any) {
    return getSchemaTpl('tabs', getSchemaTpl('commonTpl', {
      scope: this,
      context,
      groups: [
        {
          title: '基本属性',
          body: [
            {
              type: 'input-text',
              name: 'id',
              label: '组件ID',
            },
            {
              type: 'select',
              name: 'buttonType',
              options: ['default', 'primary', 'ghost', 'dashed', 'link', 'text'],
              label: '按钮类型',
            },
            {
              type: 'select',
              name: 'buttonSize',
              options: ['small', 'middle', 'large'],
              label: '按钮大小',
            },
          ],
        },
        {
          title: '按钮管理',
          body: [
            {
              type: 'input-sub-form',
              name: 'buttons',
              multiple: true,
              addable: true,
              removable: true,
              btnLabel: "${flex?'--': text}",
              mode: 'normal',
              minLength: 1,
              draggable: true,
              form: {
                title: "${text?('编辑'+text):'新增按钮'}",
                body: [
                  {
                    type: 'select',
                    name: 'itemType',
                    value: "${itemType||''}",
                    options: arrayToOptions([{ value: 'divider', label: '分割线' }, 'default', 'primary', 'ghost', 'dashed', 'link', 'text'], { inherit: true }),
                    label: '类型',
                  },
                  {
                    type: 'group',
                    direction: 'vertical',
                    visibleOn: "${itemType!=='divider'}",
                    body: [{
                      type: 'input-text',
                      name: 'itemId',
                      label: 'id',
                      required: true,
                    },
                    {
                      type: 'input-text',
                      name: 'text',
                      required: true,
                      label: '名称',
                    },
                    {
                      type: 'select',
                      name: 'icon',
                      options: iconOptions,
                      clearable: true,
                      searchable: true,
                      label: '图标',
                    },
                    {
                      type: 'select',
                      name: 'size',
                      value: "${size||''}",
                      options: arrayToOptions(['small', 'middle', 'large'], { inherit: true }),
                      label: '大小',
                    }],
                  },
                ],
              },
            },
          ],
        }],
    }));
  },
});
